<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<title>注册新用户</title>
	<link rel="stylesheet" href="assets/css/main.css" />
	<link rel="stylesheet" href="assets/libs/iconfont/iconfont.css" />
	<script src="assets/libs/jquery/1.8.1/jquery.min.js"></script>
	<script src="assets/libs/layer/layer.js"></script>
	<script src="assets/js/main.js"></script>
	<style>
	.main{padding:16px;width:998px;margin: 0 auto;border-color:#cce0ff;}
	.form{width:400px;margin: 0 auto;}
	.form input[type=text],.form input[type=password]{margin-bottom: 20px;padding-left:16px;display:block;width:100%;height;38px;line-height:32px;font-size:14px;}
	.form input{outline: none; -webkit-transition: border-color .3s cubic-bezier(.65,.05,.35,.5); transition: border-color .3s cubic-bezier(.65,.05,.35,.5); -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
	.register-title{height:126px;font-size:72px;text-align:center;}
	.register-title img{display:block;margin:0 auto;}
	.form input[type=checkbox]{display:inline-block;}
	.form input[type=submit]{display:block;width:100%;background:#3381ff;color:white;margin:20px 0;padding:0;}
	.form input[type=submit][disabled]{background:grey;}
	a{text-decoration: none;color:grey;}
	</style>
</head>
<body>
  	
  	<div class="header">
  		<div class="container">
  			<a class="header-logo" href="/"><img src="assets/images/logo.png" /></a>
  		</div>
  	</div>
  	
  	<div class="container">
  	
  		<div class="register-title">
  			<div style="height:46px;"></div>
  			<img src="assets/images/register-title.png" />
  		</div>
  		
		<div class="main">
  			<form method="POST" class="form">
  				<div style="height:22px;"></div>
  				<input name="reqId" th:value="${reqId}" type="hidden" >
  				<input id="loginName" type="text" name="loginName" data-verify="username" placeholder="用户名" th:value="${user.loginName}" />
  				<input id="mobile" type="text" name="mobile" data-verify="phone|mobilecheck" placeholder="手机号码" th:value="${user.mobile}" />
  				<img id="validateCode" th:src="@{registerValidateCode/{reqId}(reqId=${reqId},ts=${ts})}" style="display:block;width:110px;height:38px;float:right;" />
  				<input type="text" id="imgVc" placeholder="图形验证码" style="width:70%;" />
  				<div id="smsBtn" style="display:block;width:110px;height:38px;float:right;line-height:38px;color:rgba(170,170,170,1);background:rgba(230,230,230,1);text-align:center;cursor:pointer;">获取验证码</div>
  				<input type="text" name="validateCode" data-verify="required" placeholder="短信验证码" style="width:70%;" />
  				<input id="password" type="password" name="password" data-verify="required" placeholder="密码" />
  				<input type="password" data-verify="required|pass2" placeholder="确认密码" />
  				<input type="checkbox" data-verify="required" name="checked" value="true" />
  				<a href="#">我已阅读并通过注册协议</a>
  				<input disabled="disabled" type="submit" value="注册" />
  				<div style="text-align:center;">已有帐号？<a style="color:#3381ff;" th:href="@{/}">立即登陆</a></div>
  			</form>
  		</div>
  		
  		<div style="height:30px;"></div>
  		<div style="text-align:center;color:#999999;">技术支持：广州小马信息科技有限公司</div>
  		<div style="height:60px;"></div>
	</div>
	
	<script>
	
	var errMsg='[[${errMsg}]]';
	if(errMsg)alert(errMsg);
	
	document.getElementById("validateCode").onclick=function(){
		var srcSplit=this.src.split("?");
		var now=new Date().getTime();
		this.src=srcSplit[0]+"?ts+"+now;
	}
		$(function(){
			$.verify({
				"username":function(){
					var username=$("#loginName").val();
					return $.get("checkUsername",{username:username});
				},
				"pass2":function(){
					var thisVal=$(this).val();
					return $.Deferred(function(deferred){
						var pass=$("#password").val();
						if(pass!=thisVal){
							deferred.reject({errMsg:"两次输入密码不一致"})
							return;
						}
						deferred.resolve();
					}).promise();
				},
				"mobilecheck":function(){
					var mobile=$("#mobile").val();
					return $.get("checkMobile",{mobile:mobile});
				}
			});
			
			$("#smsBtn").click(function(){
				var imgVc=$("#imgVc").val();
				if(!imgVc){
					layer.alert("未填写图形验证码");
					return;
				}
				$("#mobile").verify().then(function(){
					$.post("[[@{smsCode/{reqId}(reqId=${reqId})}]]",{validateCode:imgVc,mobile:$("#mobile").val()})
					.then(function(data){
						layer.alert(data.msg);
					});
				},function(error){
					if(error.responseText)error=JSON.parse(error.responseText);
					var $this=$("#mobile");
					var errMsg=$this.data("error-msg") || error.errMsg;
					if(errMsg)layer.tips(error.errMsg, $this, {tips:1,time:2000});
				});
				
			});
			$("input[type=checkbox]").change(function(){
				var checked=$(this).is(":checked");
				$("input[type=submit]").attr("disabled",!checked);
			})
			
		})
	</script>
	
</body>
</html>